<?php
include 'logic_layer.php';

if (!isset($_SESSION)) {
    session_start();
}

//make sure the session starts from the index page
//and that the session step matched current page
if (!isset($_SESSION["step"]) || $_SESSION["step"] != "background") {
    header('Location: index.php');
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Category</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="assets/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- Main -->
        <link href="main.css" rel="stylesheet" media="screen">

    </head>

    <body>
        <!-- Part 0: Steps -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="steps ">
                    <p class="steps-done">Welcome &#10140; Outline &#10140; Personality Test &#10140; IFTTT Tutorial &#10140; Creating a Recipe &#10140;</p>
                    <p class="step-current">Questionnaire</p>
                </div>
            </div>
        </div>

        <!-- Part 1: Wrap all page content here -->
        <!-- Begin page content -->
        <div class="container">
            <div class="page-header">
                <h1>Post-task Questionnaire 3</h1>
            </div>
            <br><br>

            <p class="lead">Which category best describes yourself?</p>

            <br>

            <form action='index.php' method='post' name='frm'>
                <label class="radio">
                    <input type="radio" name="background" value="programmer"><b>Programmer</b> (I know quite a lot about computer programming)</label>
                <label class="radio">
                    <input type="radio" name="background" value="non-programmer"><b>Non-programmer</b> (I know little or nothing about computer programming)</label>

                <input type="hidden" value="thanks" name="step" />
            </form>

            <br><br>
            <button class="btn btn-success btn-large" onclick="continueStudy();" type="button">Continue</button>
            <br>
            <br>
        </div>


        <!-- Le javascript
        ================================================== -->
        <script src="assets/js/jquery/jquery-2.0.3.min.js"></script>
        <script src="assets/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/bootbox/bootbox.min.js"></script>

        <script>
                var continueStudy = function() {
                    if ($("input[name='background']:checked").val()) {
                        // go to the next step
                        document.frm.submit();
                    } else {
                        bootbox.alert("You should select a category.");
                    }
                }
        </script>
    </body>
</html>
